import { h, Component } from 'preact';
import s from './style';
import youxq from '~/assets/yxq1.png';
import youxq2 from '~/assets/yxq2.png';
import youxq3 from '~/assets/yxq3.png';
import { eCardInfoAction } from '~/actions/entrance';
import store from '~/utils/common/store';
import { connect } from 'preact-redux';
import MessageBox from '~/components/Message';
class Ecard extends Component {
	constructor() {
		super();
	}
	componentDidMount(){
		this.getCardDetail();
	}
	getCardDetail = () => {
		const { dispatch, detailId } = this.props;
		dispatch(eCardInfoAction({detailId})).catch(err=>{
			MessageBox.show({ title: err.errorMsg || '系统错误'});
		});
	}
	render() {
		const { ecard } = this.props;
		return (
			<div className={s.Ecard}>
			    <div className={s.up}>
					 <div className={s.cardBg}>
						<h2>京东E卡（10元代金券）</h2>
					    <h3 className={s.c_tit}>劵码  <span>{ecard.cardPwd || ''}</span></h3>
					 </div>
				</div>
				<div className={s.down}>
					<div className={s.c_txt}>
						<h3>
							<span><img src={youxq} className={s.youxq} /></span>
							有效期
						</h3>
						<p>自激活之日起36个月。</p>
						<p>（卡内金额支持找零，有效期内可继续使用）</p>
					</div>
					<div className={s.c_txt}>
						<h3>
							<span><img src={youxq2} className={s.youxq} /></span>
							使用规则
						</h3>
						<p>1、本卡仅限于购买京东网上商城的自营商品；</p>
						<p>2、绑定方法：直接登录绑定地址（http://giftcard.jd.com/giftcard/index.action）；</p>
						<p>3、输入密码点击绑定即可。</p>
					</div>
					<div className={s.c_txt}>
						<h3>
							<span><img src={youxq3} className={s.youxq} /></span>
							注意事项
						</h3>
						<p>京东E卡仅可购买京东网上商城的自营商品。</p>
					</div>
				</div>
			</div>
		);
	}
}

export default connect(state => (state))(Ecard);
